<template>
  <div class="app-container home">
    <el-row :gutter="10" class="xxx" style="width: 100%; padding-bottom: 10px">
      <el-col :span="5" style="align-items: center;">
        <el-card class="card-wrap">
          <div class="left-box left-box1">
            <img src="@/assets/images/item-icon1.png" alt="" />
          </div>
          <div class="right-box">
            <el-statistic :value="(schoolStatInfo.planYesCount!==undefined && schoolStatInfo.planNotCount!==undefined)?(schoolStatInfo.planYesCount+'/'+schoolStatInfo.planNotCount):'0/0'" :value-style="[{ 'font-size': '50px' }, { 'align-content': 'center' }]" />
            <span>完成/计划(日检)</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="card-wrap">
          <div class="left-box left-box2">
            <img src="@/assets/images/item-icon2.png" alt="" />
          </div>
          <div class="right-box">
            <el-statistic :value="(schoolStatInfo.taskNotCount!==undefined && schoolStatInfo.taskNotCount!==undefined)?(schoolStatInfo.taskNotCount+'/'+schoolStatInfo.taskYesCount):'0/0'" :value-style="[{ 'font-size': '50px' }, { 'align-content': 'center' }]" />
            <span>未完/已完(任务)</span>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="5" style="align-items: center">
        <el-card class="card-wrap">
          <div class="left-box left-box3">
            <img src="@/assets/images/item-icon3.png" alt="" />
          </div>
          <div class="right-box">
            <el-statistic :value="schoolStatInfo.roomMemberNum" :value-style="[{ 'font-size': '50px' }, { 'align-content': 'center' }]" />
            <span>全校住宿生人数</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card class="card-wrap">
          <div class="left-box left-box4">
            <img src="@/assets/images/item-icon4.png" alt="" />
          </div>
          <div class="right-box">
            <el-statistic :value="schoolStatInfo.classNum" :value-style="[{ 'font-size': '50px' }, { 'align-content': 'center' }]" />
            <span>全校班级数</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" style="align-items: center">
        <el-card class="card-wrap" style="margin-right: -10px;">
          <div class="left-box left-box5">
            <img src="@/assets/images/item-icon5.png" alt="" />
          </div>
          <div class="right-box">
            <el-statistic :value="schoolStatInfo.leaveNum" :value-style="[{ 'font-size': '50px' }, { 'align-content': 'center' }]" />
            <span>今日请假人数</span>
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <el-row class="main">
      <el-col :span="24">
        <el-card class="main-wrap">
              <el-row>
                <el-col>
                  <div ref="studentAttendanceRateLineRef" style="height: 700px; width: 1400px; vertical-align: center" />
                </el-col>
              </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import { initWebSocket } from '@/utils/websocket';
import * as echarts from 'echarts';
import {
  indexStat,
  studentAttendanceStat,
  gradeAttendanceStat,
  studentAttendanceDayStat,
  classAttendanceDayStat,
  shiftStat,
  buildingShiftStat
} from '@/api/stat';
import { AipatrolRecord } from '@/api/inspection';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { student_stat_options, attendance_shift } = toRefs<any>(proxy?.useDict('student_stat_options', 'attendance_shift'));

const schoolStatInfo = ref<any>({});
const studentAttendanceStatInfo = ref<any>({});
const dormitoryAttendanceStatInfo = ref<any>({});
const studentStatOption = ref('start_1');
const attendanceStatInfo = ref<any>({ attendanceNum: 0 });
const classRankList = ref<any[]>([]);

const dormitoryStatOption = ref(1);
const dormitoryStatType = ref('出');
const dormitoryStatInfo = ref<any>({});
const buildingStatList = ref<any[]>([]);

const activeName = ref('student');
const studentAttendanceStatPieRef = ref();
const studentAttendanceRateLineRef = ref();
const dormitoryAttendanceStatPieRef = ref();
const dormitoryAttendanceRateLineRef = ref();

const loadAttendanceRateLine = (res: any) => {
    console.log("dddddsssss",res)
    //日期
  let dateArr:any=[];
  res?.map((item:any)=>{
    dateArr.push(item.patrolTime?.split(" ")[0])
  })
  //实际巡检
  let sjdata:any=[];
  //计划巡检
  let jhdata:any=[];
  //漏检次数
  let ljdata:any=[];
  res?.map((item:any)=>{
    sjdata.push(item.actualCount);
    jhdata.push(item.planCount);
    ljdata.push(item.leakCount)
  })
  let myChart: echarts.ECharts = echarts.init(studentAttendanceRateLineRef.value);
  let option: echarts.EChartsOption = {
  title: {
    text: '智能巡检统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['实际巡检', '计划巡检', '漏检次数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: dateArr
  },
  yAxis: {
    type: 'value'
  },
  series: [
  {
      name: '实际巡检',
      type: 'line',
    //   stack: 'Total',
      data: sjdata
    },
    {
      name: '计划巡检',
      type: 'line',
    //   stack: 'Total',
      data: jhdata
    },
    {
      name: '漏检次数',
      type: 'line',
    //   stack: 'Total',
      data: ljdata
    },
  ]
};
  option && myChart.setOption(option);
};

const loadIndexStat = async () => {
  const res = await indexStat();
  schoolStatInfo.value = res.data;
};

const loadStudentAttendanceDayStat = async () => {
  const res = await studentAttendanceDayStat();
  attendanceStatInfo.value = res.data;
  attendanceStatInfo.value.presenceNum =
    attendanceStatInfo.value.normalNum + attendanceStatInfo.value.arriveLateNum + attendanceStatInfo.value.leaveEarlyNum;
  attendanceStatInfo.value.attendanceNum = attendanceStatInfo.value.presenceNum + attendanceStatInfo.value.absenceNum;
};



const loadGradeAttendanceStat = async (statOption?: string) => {
  const res:any = await AipatrolRecord()
  schoolStatInfo.value=res.data
  loadAttendanceRateLine(res.data.statList);
};

const loadShiftStat = async (attendanceShift: number) => {
  const res = await shiftStat(attendanceShift);
  const stat = res.data || {};
  dormitoryStatInfo.value = stat;
  if (attendanceShift % 2 === 0) {
    dormitoryStatType.value = '入';
  } else {
    dormitoryStatType.value = '出';
  }
  let data: any[];
  data = [
    { value: stat.normalCount, name: `正常人数：${stat.normalCount}` },
    { value: stat.missingCount, name: `未${dormitoryStatType.value}人数：${stat.missingCount}` },
    { value: stat.exceptionCount, name: `晚${dormitoryStatType.value}人数：${stat.exceptionCount}` },
    { value: stat.leaveCount, name: `请假人数：${stat.leaveCount}` }
  ];
};
const loadBuildingShiftStat = async (attendanceShift: number) => {
//   const res = await buildingShiftStat(attendanceShift);
//   const stats = res.data;
//   if (attendanceShift % 2 === 0) {
//     dormitoryStatType.value = '入';
//   } else {
//     dormitoryStatType.value = '出';
//   }
//   let xAxisData: string[] = stats && stats.length > 0 ? stats.map((e) => e.buildingName) : ['无'];
//   let seriesData: string[] = stats && stats.length > 0 ? stats.map((e) => e.presenceCentage) : [0];
//   let title = `学生${dormitoryStatType.value}寝率情况`;
//   loadAttendanceRateLine(dormitoryAttendanceRateLineRef, xAxisData, seriesData, title);
};

onMounted(() => {
  loadIndexStat();
  loadStudentAttendanceDayStat();
  loadGradeAttendanceStat();
  loadShiftStat(dormitoryStatOption.value);
  loadBuildingShiftStat(dormitoryStatOption.value);
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + '/resource/websocket');
});

const goTarget = (url: string) => {
  window.open(url, '__blank');
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  .main {
    height: calc(100vh - 270px);
    .main-wrap {
      display: flex;
      :deep {
        .el-card__body {
          .demo-tabs {
            flex: 1;
          }
          display: flex;
          flex: 1;
        }
      }
      .r-title {
        color: rgb(81, 90, 110);
        font-size: 16px;
        text-align: center;
        font-weight: 600;
        padding: 10px;
        line-height: 100%;
      }
    }
  }

  .card-wrap {
    height: 110px;
    color: rgb(81, 90, 110);

    :deep {
      .el-card__body {
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
      }
    }

    .left-box {
      background: rgb(45, 140, 240);
      height: 100%;
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 40px;
      }
    }

    .left-box1 {
      background: rgb(45, 140, 240);
    }

    .left-box2 {
      background: rgb(25, 190, 107);
    }

    .left-box3 {
      background: rgb(255, 153, 0);
    }

    .left-box4 {
      background: rgb(255, 112, 67);
    }

    .left-box5 {
      background: rgb(228, 108, 187);
    }

    .right-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      width: 60%;
    }
  }
}
</style>
